<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="3.reset.css" type="text/css" rel="stylesheet">
    <link href="2.style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
        <div class="top">
            <div class="container">
                <div class="collection left">收藏猿代码</div>
                <div class="welcome right">欢迎来到猿代码！
                    <a href="#">[登录]</a>
                    <a href="#">[免费注册]</a></div>
            </div>
        </div>
        <div class="logobar">
            <div class="container">
                <div class="logo-box left">
                    <img src="./images/logo.png" alt="猿代码" title="猿代码" width="110px" height="60px">
                </div>
                <div >
                   <form action="#" class="search-box left" >
                       <input   type="text" name=""  class="search-input">
<!--                       <button >搜索</button>-->
                       <input type="submit" value="搜索" class="search-submit">
                   </form>
                </div>
                <div class="shopcar right">
                    <img src="./images/shopcar.jpg" class="shopcar1 left">
                    <div class="shopcar2 left">购物车</div>
                        <div class="shopcar3 left">0</div>
                    <img src="./images/icon.jpg" class=" shopcar4 left">
                </div>
            </div>
        </div>
        <div class="nav">
            <div class="nav1">
                <ul class="nav100">
                    <li  class="全部商品分类">全部商品分类
                        &nbsp<img src="./images/sanjiao.png">
                    </li>
                    <li class="数码城">数码城</li>
                    <li>天黑黑</li>
                    <li>团购</li>
                    <li>发现</li>
                    <li>二手特卖</li>
                    <li>名品会</li>
                </ul>
            </div>
        </div>
</div>
<div class="banner">
    <div class="产品列表 ">
        <ul class="banner2">
            <li><!--第一部分-->
                <ul class="banner3">
                    <li class="banner4">
                        <a>手机</a>
                        <a>数码</a>
                       <span class="合约机">&nbsp&nbsp<a>合约机</a>&nbsp&nbsp</span>
<!--                        <img src="./images/showclass-jiantou.png" alt="三角" >-->
                    </li>
                    <li class="banner5">
                        <a>荣耀X</a>
                        <a>单反</a>
                        <a>智能设备</a>
                    </li>
                </ul>
                <ul class="banner3 right">
                    <li><img src="./images/showclass-jiantou.png" alt="三角" ></li>
                    <li>&nbsp</li>
                </ul>

            </li>
            <li><!--第2部分-->
                <ul class="banner3">
                    <li class="banner4">
                        <a>电脑</a>
                        <a>硬件外设</a>
                        <a>装机宝</a>
                    </li>
                    <li class="banner5">
                        <a>笔记本</a>
                        <a>台式机</a>
                        <a>超极本</a>
                        <a>平板</a>
                    </li>
                </ul>
                <ul class="banner3 right">
                    <li><img src="./images/showclass-jiantou.png" alt="三角" ></li>
                    <li>&nbsp</li>
                </ul>
            </li>
            <li><!--第3部分-->
                <ul class="banner3">
                    <li class="banner4">
                        <a>大家电</a>
                    </li>
                    <li class="banner5">
                        <a>电视</a>
                        <a>空调</a>
                        <a>冰箱</a>
                        <a>洗衣机</a>
                    </li>
                </ul>
                <ul class="banner3 right">
                    <li><img src="./images/showclass-jiantou.png" alt="三角" ></li>
                    <li>&nbsp</li>
                </ul>
            </li>
            <li><!--第4部分-->
                <ul class="banner3">
                    <li class="banner4">
                        <a>厨房电器</a>
                        <a>生活电器</a>
                    </li>
                    <li class="banner5">
                        <a>空气净化器</a>
                        <a>微波炉</a>
                        <a>取暖设备</a>
                    </li>
                </ul>
                <ul class="banner3 right">
                    <li><img src="./images/showclass-jiantou.png" alt="三角" ></li>
                    <li>&nbsp</li>
                </ul>
            </li>
            <li><!--第5部分-->
                <ul class="banner3">
                    <li class="banner4">
                        <a>食品/</a>
                        <a>饮料/</a>
                        <a>生鲜</a>
                        <a>粮油</a>
                    </li>
                    <li class="banner5">
                        <a>进口</a>
                        <a>方便面</a>
                        <a>零食</a>
                        <a>保健</a>
                    </li>
                </ul>
                <ul class="banner3 right">
                    <li><img src="./images/showclass-jiantou.png" alt="三角" ></li>
                    <li>&nbsp</li>
                </ul>
            </li>
        </ul>

    </div>
    <img src="./images/banner01.jpg" alt="手表" class="picture right">
</div>
<div class="product-list">
    <div class="product-list1">
        <img  src="images/product-icon1.png">
        <a id="家用电器">家用电器</a>
        <a id="更多">更多>></a>
    </div>
    <div class="product-list2">
        <img src="./images/product-banner01.jpg" alt="美人鱼" class="美人鱼 left">
        <!--第1张图片-->
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/HTC.jpg" alt="图片1" >
            </div>
            <div class="图片1文字">
               <h1>HTC新渴望8系列 </h1>
                <h4>1899元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="./images/三星手机.png" alt="三星手机">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字" style="color:#FF7300">NFC技术一碰轻松配对！接触屏幕</div>
                    <div class="图片1最下面_描述_价格">￥149.00</div>
                </div>
            </div>
        </div><!--第2张图片-->
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/HTC.jpg" alt="图片2" >
            </div>
            <div class="图片1文字">
                <h1>HTC新渴望8系列 </h1>
                <h4>2888元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="./images/三星手机.png" alt="三星手机">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">Samsung三星G ALAXY Grand2</div>
                    <div class="图片1最下面_描述_价格">￥2000.00</div>
                </div>
            </div>
        </div><!--第3张-->
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/HTC.jpg" alt="图片3" >
            </div>
            <div class="图片1文字">
                <h1>HTC新渴望8系列 </h1>
                <h4>2899元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="images/4.ipad.png" alt="苹果ipad">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">Samsung三星G ALAXY Grand2</div>
                    <div class="图片1最下面_描述_价格">￥1888.00</div>
                </div>
            </div>
        </div>
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/HTC.jpg" alt="图片4" >
            </div>
            <div class="图片1文字">
                <h1>HTC新渴望8系列 </h1>
                <h4>2888元</h4>
            </div>
            <div class="图片1最下面" id="苹果一体机图4">
                <img class="图片4最下面_描述_图片" src="./images/apple屏幕.png" alt="苹果屏幕">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">Apple苹果 全新Retita屏MacBoo</div>
                    <div class="图片1最下面_描述_价格">￥20020.00</div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="product-list">
    <div class="product-list3">
        <img  src="./images/product-icon.jpg" class="酒水前面图">
        <a id="food" class="食品酒水">食品酒水</a>
        <a id="更多1">更多>></a>
    </div>
    <div class="product-list4">
        <img src="./images/广告p.png" alt="左边广告图片" class="左边广告图片 left"><!--第1张图片-->
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/食品p.png" alt="食品p" >
            </div>
            <div class="图片1文字">
                <h1>三月美食狂享购 </h1>
                <h4>50元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="./images/康比特p.png" alt="康比特">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">康比特 维他保咀嚼片 60片</div>
                    <div class="图片1最下面_描述_价格">￥600.00</div>
                </div>
            </div>
        </div>
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/食品p.png" alt="食品p" >
            </div>
            <div class="图片1文字">
                <h1>三月美食狂享购 </h1>
                <h4>40元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="./images/康比特p.png" alt="康比特">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">康比特 维他保咀嚼片 60片</div>
                    <div class="图片1最下面_描述_价格">￥400.00</div>
                </div>
            </div>
        </div>
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/食品p.png" alt="食品p" >
            </div>
            <div class="图片1文字">
                <h1>三月美食狂享购 </h1>
                <h4>20元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="./images/康比特p.png" alt="康比特">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">康比特 维他保咀嚼片 60片</div>
                    <div class="图片1最下面_描述_价格">￥200.00</div>
                </div>
            </div>
        </div>
        <div class="排列图片 left">
            <div class="图片1">
                <img src="./images/食品p.png" alt="食品p" >
            </div>
            <div class="图片1文字">
                <h1>三月美食狂享购 </h1>
                <h4>80元</h4>
            </div>
            <div class="图片1最下面">
                <img class="图片1最下面_描述_图片" src="./images/康比特p.png" alt="康比特">
                <div class="图片1最下面_描述">
                    <div class="图片1最下面_描述_文字">康比特 维他保咀嚼片 60片</div>
                    <div class="图片1最下面_描述_价格">￥100.00</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer1">
        <p>猿代码简介|猿代码公告| 招纳贤士| 联系我们|客服热线：400-700-1307</p>
        <p>Copyright © 2006 - 2016 猿代码版权所有   沪ICP备09037834号   沪ICP证B1034-8373号   上海市市公安局宝山分局备案编号：123456789123</p>
    </div>
   <div class="底部logo墙">
       <img src="./images/authentication.png" alt="底部LOGO墙">
    <img src="./images/authentication.png" alt="底部LOGO墙">
    <img src="./images/authentication.png" alt="底部LOGO墙">
    <img src="./images/authentication.png" alt="底部LOGO墙">
   </div>
</div>
</body>
</html>